<!DOCTYPE html>
<br lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        .xinxi {
            border: 1px solid black;
        }
    </style>
</head>
<!-- http://wthrcdn.etouch.cn/weather_mini?city=北京
    这里有一个坑，？必须要是英文的问号，问号后面是传参
    -->

<br>
<div id='a'>
    <p>天知道</p>
    <input type="text" placeholder="输入城市" @keyup.enter='chaxun()' v-model='city'>
    <br>
    <span @click='chang("上海")'>上海</span><span @click='chang("北京")'>北京</span><span @click='chang("广州")'>广州</span><span @click='chang("荆州")'>荆州</span>
    <!-- 'chang(上海)'错了，必须是'chang("上海")'才行 ，字符串需要加引号-->
    <div class="xinxi" v-for='item in shuzu'>{{item.date}}{{item.high}}{{item.low}}</div>
</div>
<script>
    new Vue({
        el: '#a',
        data: {

            city: '',
            shuzu: [1, 2, 3, 4, 5]

        },
        methods: {
            chaxun: function() {
                var that = this;
                axios.get(' http://wthrcdn.etouch.cn/weather_mini?city=' + this.city).then(function(response) {
                    that.shuzu = response.data.data.forecast;

                }, function(err) {
                    console.log(err);
                })
            },
            chang: function(cityy) {
                this.city = cityy;
                this.chaxun();
            }
        }

    })
</script>
</body>

</html>